<style lang="less">
.title-text span {
  display: block; /*设置为块级元素会独占一行形成上下居中的效果*/
  position: relative; /*定位横线（当横线的父元素）*/

  color: black; /*居中文字的颜色*/
  font-weight: bold;
  text-align: center;
}

.title-text span:before,
.title-text span:after {
  content: "";
  position: absolute; /*定位背景横线的位置*/
  top: 50%;
  background: #dfdfdf; /*背景横线颜色*/
  width: 44%; /*单侧横线的长度*/
  height: 1px;
}

.title-text span:before {
  left: 0; /*调整背景横线的左右距离*/
}

.title-text span:after {
  right: 0;
}
</style>
<template >

  <div class="search" style="background-color: rgb(255,255,255)">
      <Tabs type="card"  @on-click="clickType">
        <TabPane label="审核页面"></TabPane>
        <TabPane label="影像资料"></TabPane>
      </Tabs>
    <div class="addInfo" style="display: block" v-if="index==0">
      <h2 class="title-text"><span>审核意见</span></h2>
      <Row style="margin-top: 1%;border: 1px solid #dcdee2; border-color: #e8eaec;    margin: 8px;">
        <Form ref="companyForm" :model="companyForm" :label-width="140">
          <Row style="padding-top: 11px">
            <i-col span="12">
              <FormItem label="审核意见" prop="useStstus" style="margin-left: 40%">
                <Select v-model="companyForm.useStstus" filterable style="    width: 200px;" size="default">
                  <Option value="00">通过</Option>
                  <Option value="02">退回</Option>
                  <Option value="04">拒绝</Option>
                </Select>
              </FormItem>
            </i-col>

          </Row>
          <Row>
            <i-col span="12">
              <FormItem label="备注" prop="startStopReason" style="margin-left: 40%">
                <Input type="text" size="default" v-model="companyForm.startStopReason" clearable placeholder="请输入"
                  style="width: 160%" />
              </FormItem>
            </i-col>
            <i-col span="6" v-if="companyForm.useStstus!='02'">
              <Button @click="handleBack" size="large" type="primary"
                style=" float: right;   ">返回</Button>
              <Button @click="handleCommit('companyForm')" size="large" type="primary" 
                style=" float: right; margin-right: 10px;  ">提交</Button>
            </i-col>

          </Row>
          <Row v-if="companyForm.useStstus=='02'">
            <i-col span="12">
              <FormItem label="退回原因" prop="useStartStopReason" style="margin-left: 40%">
                <Input type="text" size="default" v-model="companyForm.useStartStopReason" clearable placeholder="请输入原因"
                  style="width: 160%" />
              </FormItem>
            </i-col>
            <i-col span="6">
              <Button @click="handleBack" size="large" type="primary"
                style=" float: right;   ">返回</Button>
              <Button @click="handleCommit('companyForm')" size="large" type="primary" 
                style=" float: right; margin-right: 10px;  ">提交</Button>
            
            </i-col>
          </Row>

        </Form>
      </Row>
    </div>
    <div class="addInfo" style="display: block" id="thirdCompany" v-if="index==0">
      <h2 class="title-text"><span id="gkType">车辆信息</span></h2>
      <Row style="margin-top: 1%;border: 1px solid #dcdee2; border-color: #e8eaec;    margin: 8px;">
        <Form ref="companyForm" :model="companyForm" :rules="ruleValidate" :label-width="140">
          <Row style="padding-top: 11px">
            <i-col span="8">
              <FormItem label="申请时间" prop="createTime">
                <Input type="text" size="default" disabled v-model="companyForm.createTime" clearable
                  style="width: 200px" />
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="合作商名称" prop="channelId">
                <Select v-model="companyForm.channelId" disabled filterable style="    width: 200px;" size="default">
                  <Option v-for="item in baseInfo" :value="item.id" :key="item.id">{{ item.channelFullName }}</Option>
                </Select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <Form-item label="是否已上牌" prop="useCarNumber">
                <RadioGroup v-model="companyForm.useCarNumber"  @on-change="checkLimitPut()">
                    <Radio disabled label="1" >是</Radio>
                    <Radio disabled label="0">否</Radio>
                </RadioGroup>
              </Form-item>
            </i-col>

          </Row>
          <Row>
            <i-col span="8">
              <Form-item label="车辆类型" prop="carType">
                <Select v-model="companyForm.carType" disabled placeholder="请选择" clearable style="width: 200px"
                  size="default">
                  <Option value="01">乘用车</Option>
                  <Option value="02">商用车</Option>
                </Select>
              </Form-item>
            </i-col>
            <i-col span="8">
              <Form-item label="品牌" prop="brand">
                <Input type="text" size="default" disabled v-model="companyForm.brand" clearable style="width: 200px" />
              </Form-item>
            </i-col>
            <i-col span="8">
              <Form-item label="车型" prop="model">
                <Input type="text" disabled size="default" v-model="companyForm.model" clearable style="width: 200px" />
              </Form-item>
            </i-col>
          </Row>

          <Row>
            <i-col span="16">
              <Form-item label="款式" prop="style">
                <Input type="text" disabled size="default" v-model="companyForm.style" clearable placeholder="请输入详细地址"
                  style="width: 480px" />
                <Button  type="primary" size="default" @click="seleckVin">VIN解析</Button>
              </Form-item>
            </i-col>
            <i-col span="8">
              <Form-item label="VIN号" prop="vin">
                <Input type="text" disabled size="default" v-model="companyForm.vin" clearable style="width: 200px" />
              </Form-item>
            </i-col>
          </Row>

          <Row>
            <i-col span="8">
              <Form-item label="表显里程" prop="apparentMileage">
                <Input type="text" disabled size="default" v-model="companyForm.apparentMileage" clearable
                  style="width: 200px" />
              </Form-item>
            </i-col>
            <i-col span="8">
              <Form-item label="开票日期" prop="invoiceTime">
                <Date-picker disabled type="date" size="default"
                 :value="companyForm.invoiceTime" @on-change="companyForm.invoiceTime=$event" placeholder="选择日期" style="width: 200px"></Date-picker>
              </Form-item>
            </i-col>
            
            <i-col span="8">
              <Form-item label="车辆出厂日期" prop="manufactureDate">
                <Date-picker disabled type="date" size="default" v-model="companyForm.manufactureDate" placeholder="选择日期"
                  style="width: 200px"></Date-picker>
              </Form-item>
            </i-col>
          </Row>

          <Row>
            <i-col span="8">
              <Form-item label="所有人" prop="ownerName">
                <Input type="text" disabled size="default" v-model="companyForm.ownerName" clearable placeholder="请输入"
                  style="width: 200px" />
              </Form-item>
            </i-col>
            <i-col span="8">
              <Form-item label="证件号码" prop="ownerCardId">
                <Input type="text" disabled size="default" v-model="companyForm.ownerCardId" clearable placeholder="请输入"
                  style="width: 200px" />
              </Form-item>
            </i-col>
            <i-col span="8">
              <Form-item label="原使用性质" prop="useCharacter">
                <Select v-model="companyForm.useCharacter" disabled placeholder="请选择" clearable style="width: 200px"
                  size="default">
                  <Option value="01">自用</Option>
                  <Option value="02">商用</Option>
                </Select>
              </Form-item>
            </i-col>
          </Row>

          <Row>
            <i-col span="8">
              <Form-item label="指导价" prop="guidancePrice">
                <Input type="text" disabled size="default" v-model="companyForm.guidancePrice" clearable placeholder="请输入"
                  style="width: 200px" />
              </Form-item>
            </i-col>
            <i-col span="8">
              <Form-item label="排量" prop="outputVolume">
                <Input type="text" disabled size="default" v-model="companyForm.outputVolume" clearable placeholder="请输入"
                  style="width: 200px" />
              </Form-item>
            </i-col>
            <i-col span="8">
              <div v-for="(item,index) in companyForm.addressinfo" :key="index">
                <FormItem label="上牌省市" :prop="'addressinfo['+index+'].detailAddress'"
                  :style="{'z-index':'99'-index,'position':'relative'}">

                  <Cascader :load-data="loadData" disabled :data="location" style="width:200px;height: 33px;"
                    size="default" v-model="item.detailAddress" placeholder="下拉选择省市" class="show_cascader_input"
                    :clearable="false">
                  </Cascader>

                </FormItem>
              </div>
            </i-col>
          </Row>

          <Row>
            <i-col span="8">
              <Form-item label="发动机号" prop="engineNumber">
                <Input type="text" disabled size="default" v-model="companyForm.engineNumber" clearable placeholder="请输入"
                  style="width: 200px" />
              </Form-item>
            </i-col>
            <i-col span="8">
              <Form-item label="车身颜色" prop="bodyColor">
                <Input type="text" disabled size="default" v-model="companyForm.bodyColor" clearable placeholder="请输入"
                  style="width: 200px" />
              </Form-item>
            </i-col>
            <i-col span="8">
              <Form-item label="总过户次数" prop="transferNumber">
                <Input type="text" disabled size="default" v-model="companyForm.transferNumber" clearable
                  placeholder="请输入" style="width: 200px" />
              </Form-item>
            </i-col>
          </Row>

          <Row>
            <i-col span="8">
              <Form-item label="燃料类型" prop="fuelType">
                <Select v-model="companyForm.fuelType" disabled placeholder="请选择" clearable style="    width: 200px;"
                  size="default">
                  <Option value="01">燃油</Option>
                  <Option value="02">新能源</Option>
                </Select>
              </Form-item>
            </i-col>
            <i-col span="8">
              <Form-item label="车牌号" prop="carNumber">
                <Input type="text" disabled size="default" v-model="companyForm.carNumber" clearable placeholder="请输入"
                  style="width: 200px" />
              </Form-item>
            </i-col>
            <i-col span="8">
              <Form-item label="首次登记日期" prop="firstLicensePlateDate">
                <Date-picker disabled type="date" size="default" v-model="companyForm.firstLicensePlateDate"
                  placeholder="选择日期" style="width: 200px"></Date-picker>
              </Form-item>
            </i-col>
            
          </Row>

          <Row v-if="companyForm.useStstus=='00'">
            <i-col span="8">
              <Form-item label="车辆评估价" prop="evaluationPrice">
                <Input size="default" v-model="companyForm.evaluationPrice" placeholder="请输入" style="width: 200px" />
              </Form-item>
            </i-col>
            <i-col span="8">
              <Form-item label="有效期天数" prop="validityDays">
                <Input size="default" v-model="companyForm.validityDays" placeholder="请输入" style="width: 200px" />
              </Form-item>
            </i-col>

          </Row>

        </Form>
      </Row>
    </div>
  </div>
</template>

<script>
import { province, city, area } from "_p/afs-apply/assets/js/staticData.js";
import {getLocation} from "_p/afs-apply/api/apply-report/personal/common";
import circleLoading from "_c/circle-loading/circle-loading.vue";
import * as utils from "@/projects/afs-apply/assets/js/utils";
import {
  getChannelBaseInfo,
  getChannelById,
  channelToExamine,
  getCarByVin
} from "@/projects/afs-apply/api/register-mng/listRecord";
export default {
  name: "list-examine",
  // components: {
  //     circleLoading
  // },
  data() {
    return {
      // 引用别人的省市
      location: [],
      totalLevel: 2,

      isShowFile: false,
      loading: true,

      index: 0, // 0:d代表审核页面 1代表 影像资料

      companyForm: {
        createTime: null, // 申请时间
        channelId: null, // 合作商名称
        carType: null, // 车辆类型
        brand: null, //品牌
        model: null, // 车型
        style: null, //款式
        vin: null, // vin号
        apparentMileage: null, //表显里程
        firstLicensePlateDate: null, // 首次登记时间
        manufactureDate: null, //车辆出厂日期
        ownerName: null, //所有人
        ownerCardId: null, // 证件号码
        useCharacter: null, //原使用性质
        guidancePrice: null, // 指导价
        outputVolume: null, //排量
        cardProvince: null, //上牌省
        cardCity: null, //上牌市
        engineNumber: null, //发动机号
        bodyColor: null, //车身颜色
        transferNumber: null, //总过户次数
        fuelType: null, //燃料类型
        carNumber: null, // 车牌号
        invoiceTime:null, //开票日期

        // 这个用于新页面提交修改
        useStstus: null, //修改的状态状态
        startStopReason: null, // 修改的备注
        useStartStopReason: null, // 原因

        evaluationPrice: null, //车辆评估价
        validityDays: null, // 有效期天数
        useCarNumber:null, // 是否上牌

        // 省市用的
        position: "",
        // 地址信息
        addressinfo: [
          {
            detailAddress: []
          }
        ]
      },

      // 存放合作商的集合
      baseInfo: [],

      // 下面用于表单必填验证
      ruleValidate: {
        ownerName: [
          { required: true, message: "所有人不能空", trigger: "blur" }
        ],
        carCount: [
          { required: true, message: "所有人不能空", trigger: "blur" }
        ],
        ownerCardId: [
          { required: true, message: "证件号码不能空", trigger: "blur" }
        ],
        manufactureDate: [
          {
            required: true,
            type: "date",
            message: "车辆出厂日期不能空",
            trigger: "blur"
          }
        ],
        guidancePrice: [
          { required: true, message: "指导价不能空", trigger: "blur" }
        ],
        outputVolume: [
          { required: true, message: "排量不能为空", trigger: "blur" }
        ],
        engineNumber: [
          { required: true, message: "发动机号不能为空", trigger: "blur" }
        ],
        bodyColor: [
          { required: true, message: "颜色不能为空", trigger: "blur" }
        ],
        fuelType: [
          { required: true, message: "燃料类型不能为空", trigger: "blur" }
        ],
        carType: [
          { required: true, message: "请选择车辆类型", trigger: "blur" }
        ],
        // evaluationPrice: [
        //   { required: true, message: "请输入评估价", trigger: "blur" }
        // ],
        // validityDays: [
        //   { required: true, message: "请输入有效期", trigger: "blur" }
        // ]
      },
      submitLoading: false,
      total: 0
    };
  },
  methods: {
    init() {
      this.companyForm.id = this.afs.getPageParams(this).id;
      console.log(this.companyForm.id);
      this.getBaseInfo();
      this.getById();
      this.getLocationData();
    },
    // 切换审核页面或者影像资料
    clickType(type) {
      this.index = type;
    },
    // 点击返回
    handleBack() {
      this.afs.closeTab(this);
    },
    // 点击提交
    handleCommit(name) {
      if (
        this.companyForm.useStstus == null ||
        this.companyForm.useStstus == undefined ||
        this.companyForm.useStstus == ""
      ) {
        this.$Message.error("请选择审批意见！");
        return;
      }
      if(this.companyForm.useStstus=="00"){
        if(this.companyForm.evaluationPrice==null||this.companyForm.evaluationPrice==undefined||this.companyForm.evaluationPrice==""){
           this.$Message.error("请输入评估价！");
           return;
        }else{
            if(!utils.isTwoDicmal(this.companyForm.evaluationPrice)){
            this.$Message.error("评估价最多2位小数！");
            return;
          }
        }
        if(this.companyForm.validityDays==null||this.companyForm.validityDays==undefined||this.companyForm.validityDays==""){
           this.$Message.error("请输入有效期！");
           return;
        }else{
          if(!utils.isPositiveInteger(this.companyForm.validityDays)){
          this.$Message.error("有效期只可以为正整数！");
          return;
        }
        }

      }
      this.$refs[name].validate(valid => {
        if (valid) {
          let params = {
            id: this.companyForm.id,
            evaluationPrice: this.companyForm.evaluationPrice,
            validityDays: this.companyForm.validityDays,
            status: this.companyForm.useStstus,
            startStopReason: this.companyForm.startStopReason
          };
          // 预审挂牌车
          channelToExamine(params)
            .then(res => {
              if (res.code === "0000") {
                this.$Message.success("操作成功");
                this.afs.closeTab(this);
              }
            })
            .catch(() => {});
        } else {
          this.$Message.error("请补全信息");
        }
      });
    },

    // 获取合作商信息接口
    getBaseInfo() {
      getChannelBaseInfo({status:"00"}).then(res => {
        this.loading = false;
        if (res.code === "0000") {
          this.baseInfo = res.data;
        }
      });
    },
    // 根据id 去查询数据
    getById() {
      getChannelById({ id: this.companyForm.id }).then(res => {
        this.operationLoading = false;
        if (res.code === "0000") {
          this.companyForm = res.data;
          this.companyForm.guidancePrice = this.companyForm.guidancePrice.toString();
          this.companyForm.channelId = this.companyForm.channelId.toString();
          if (
            this.companyForm.validityDays != null &&
            this.companyForm.validityDays != undefined
          ) {
            this.companyForm.validityDays = this.companyForm.validityDays.toString();
          }
          if (
            this.companyForm.evaluationPrice != null &&
            this.companyForm.evaluationPrice != undefined
          ) {
            this.companyForm.evaluationPrice = this.companyForm.evaluationPrice.toString();
          }
          console.log(this.companyForm.guidancePrice);

          // 地址信息
          this.companyForm.addressinfo = [
            {
              detailAddress: [
                this.companyForm.cardProvince,
                this.companyForm.cardCity
              ]
            }
          ];
        }
        console.log(this.companyForm.addressinfo);
      });
    },

    seleckVin() {
      getCarByVin({ vin: this.companyForm.vin, loanDate: 1562053070079 }).then(
        res => {
          if (res.code == "0000") {
            if (res.data.code == 0) {
              this.linkDownload(res.data.data.url);
            } else {
              this.$Message.error("VIN码错误");
            }
          }
        }
      );
    },
    // 跳转新的页面
    linkDownload(url) {
      window.open(url, "_blank"); // 新窗口打开外链接
    },

    // 这一块应该是有关省市区的
    getLocationData() {
      let param = "";
      param = {
        level: "1",
        upperCode: "1"
      };
      getLocation(param).then(res => {
        if (res.code == "0000") {
          res.data.value = province;
          res.data.forEach(item => {
            let obj = {
              value: item.value,
              label: item.label,
              children: [],
              level: 0,
              loading: false
            };
            this.location.push(obj);
          });
        }
      });
    },
    // 这一块应该是关系省市区的
    loadData(item, callback) {
      console.log(item);
      item.loading = true;
      let param = "";
      param = {
        level: item.level + 1,
        upperCode: item.value
      };
      getLocation({ upperCode: item.value }).then(res => {
        if (res.code == "0000") {
          res.data.forEach(val => {
            let obj = {
              value: val.value,
              label: val.label
            };
            let templevel = parseInt(item.level);
            // 当层级没有到最后一层
            console.log(templevel + 1, this.totalLevel - 1);
            if (templevel + 1 < this.totalLevel - 1) {
              obj.children = [];
              obj.level = templevel + 1;
              obj.loading = false;
            }
            item.children.push(obj);
          });
          item.loading = false;
          callback();
        }
      });
    }
  },
  // 初始化加载
  mounted() {
    this.init();
  }
};
</script>
